<template>
  <div class="article">
    <div class="article-header">
      <van-search
        shape="round"
        v-model="value"
        @click="goDetail"
        placeholder="全场50元起步"/>
    </div>

    <van-tree-select
      height="100%"
      :items="items"
      :main-active-index.sync="active">
      <template #content>
        <div v-for="(item, index) in categories" :key="item.categoryId">
          <div v-for="(item2, index2) in item.secondLevelCategoryVOS" :key="index2">
            <div v-if="active === index">
              <p class="article-title">{{ item2.categoryName }}</p>
              <van-grid :column-num="3" :border='false'>
                <van-grid-item
                  v-for="item3 in item2.thirdLevelCategoryVOS"
                  :key="item3.length"
                  to="/article/articleinfo"
                  icon="http://s.weituibao.com/1583591077131/%E5%88%86%E7%B1%BB.png"
                  :text="item3.categoryName"/>
              </van-grid>
            </div>
          </div>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>
<script>
import { getCategories } from '@/api/article'

export default {
  data() {
    return {
      value: '',
      active: 0,
      items: [{ text: '分组 1' }, { text: '分组 2' }, { text: '分组 3' }, { text: '分组 4' }, { text: '分组 5' }, { text: '分组 6' }, { text: '分组 7' }, { text: '分组 8' }, { text: '分组 9' }],
      categories: []
    }
  },
  created() {
    this.getCategories()
  },
  methods: {
    async getCategories() {
      const { data } = await getCategories()
      this.categories = data
      this.items.forEach((item, index) => {
        item.text = this.categories[index].categoryName
      })
      console.log(this.categories)
    },
    goDetail() {
      this.$router.push('/article/articleinfo')
    }
  }
}
</script>
<style lang="scss">
.article {
  .article-header {
    border-bottom: 1px solid #656771;
  }

  .article-title {
    font-size: 26px;
  }

  .van-icon__image {
    width: 34px;
    height: 34px;
  }

  .van-grid-item__text {
    font-size: 17px;
    text-align: center;
  }

  .van-tree-select {
    position: fixed;
    top: 110px;
    width: 100%;
  }

  .van-tree-select__content {
    margin-bottom: 160px;
  }
}
</style>
